<!-- <template>
    <h1>组合式语法糖写法</h1>
    <h1 v-text="num"></h1>
    <button @click="add">+1</button>
  </template>
  
  <script setup>
  // 在Vue中，怎么规避选项式写法？在<script setup>，这种在script上添加setup是Vue3组合式写法的语法糖。并且是官方推荐的语法糖
  import { ref } from "vue";
  const num = ref(10);
  const add = () => {
    // 调用需要用.value
    num.value++;
  };
  </script> -->


<template>
    <h3>组合式语法糖</h3>
    <h3>num:{{ num }}</h3>
    <h3>state:{{ obj.state }}</h3>
    <!-- <h3>obj2.id:{{ obj2.id+1 }}</h3> -->
    <!-- <h3>obj2.id:{{ id+1 }}</h3> -->
    <button @click="add">加1</button>
    <button @click="del">减1</button>
    <button @click="delState">state减1</button>
    <button @click="addState">state加1</button>
</template>

<script setup>
import { ref, reactive } from 'vue';
const num = ref(0)
const obj = reactive({ state: 0 })
// const obj2 = {id :ref(1)} //用reactive就可以
// const {id} = obj2 //想使用响应式就需要用解构赋值
const delState = () => {
    obj.state--
}
const addState = () => {
    obj.state++
}
console.log(num);
const add = () => {
    console.log(num);
    num.value++
}
/* 不仅可以写箭头函数，还可以用function */
// function add() {
//   num.value++
// }

const del = () => {
    num.value--

}


const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)

const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)


</script>

